<template>
  <!-- 歌单详情 -->
  <div class="play-list-detail mtop-20">
    <el-skeleton :loading="isLoading" animated>
      <!-- 骨架 -->
      <template v-if="!isPhone" slot="template">
        <el-skeleton-item variant="image" style="width: 180px; height: 180px" />
        <div style="padding-top: 14px">
          <el-skeleton-item variant="text" style="width: 50%" />
          <div
            style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            "
          >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
          </div>
        </div>
      </template>
      <template>
        <div>
          <!-- 歌单图片及信息 -->
          <div class="detail-desc">
            <!-- 歌单图片 -->
            <div class="detail-img-wrapper">
              <img class="img img-radius-8 img-border" v-lazy="ImgUrl" />
            </div>
            <!-- 歌单信息 -->
            <div class="detail-desc-info">
              <div class="info-title">
                <Tag text="歌单"></Tag>
                <span class="mleft-12 font-20 font-bold">小雨云听精选歌单</span>
              </div>
              <div class="author">
                <div class="author-img pointer">
                  <img class="img-h circle" :src="avatarUrl" />
                </div>
                <div class="author-info">
                  <span class="mleft-12 font-12 pointer" style="color: #0b58b0"
                    >小雨云听</span
                  >
                  <span class="mleft-12 font-12">2022-11-01</span>
                </div>
                <!-- 歌单按钮 -->
                <ul class="info-btn">
                  <button class="btn btn-blue" @click="playAll">
                    <i class="iconfont icon-bofang"></i>
                    <span class="btn-text">&nbsp;&nbsp;播放全部</span>
                  </button>
                </ul>
              </div>

              <div class="detail-tag font-14" v-if="tags.length !== 0">
                <span>标签 ：</span>
                <span
                  class="mright-10"
                  v-for="(val, index) in tags"
                  :key="index"
                  >{{ val }}</span
                >
              </div>
              <div class="num-info font-14">
                <span>歌曲 ：20</span>
                <span class="mleft-12">播放 ：15万</span>
              </div>
              <!-- 歌单描述 -->
              <div class="font-14">
                <input id="check" type="checkbox" />
                <div class="element">
                  <p
                    style="max-width: 1000px"
                    v-text="`2022全网最火超好听热门歌曲，喜欢不妨加个收藏`"
                  ></p>
                </div>
              </div>
            </div>
          </div>
          <!-- 歌单列表 -->
          <div class="detail-head">
            <TabMenu :menuList="['歌曲列表']"></TabMenu>
            <div class="detail-search" v-show="showtab === 1">
              <el-input
                placeholder="搜索音乐"
                clearable
                suffix-icon="el-icon-search"
                v-model="key"
              ></el-input>
            </div>
          </div>
          <div v-show="showtab === 1">
            <MusicList ref="listRef" :list="list" :type="1"></MusicList>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import MusicList from "@/components/list/MusicList";
import TabMenu from "@/components/menu/TabMenu";
import Tag from "@/components/simple/Tag";
import { getAllMusicList } from "@/api/api_music";
import { mapState } from "vuex";
export default {
  components: {
    MusicList,
    TabMenu,
    Tag,
  },
  data() {
    return {
      info: {},
      key: "",
      playList: [],
      subscribed: false,
      showtab: 1,
      creator: {},
      tags: ["华语", "榜单", "流行"],
      suberList: [],
      pageInfo: {
        currentPage: 1,
        total: 0,
      },
      isLoading: true,
      avatarUrl:
        "https://labfile.oss.aliyuncs.com/courses/10288/default-avatar.png",
      isSubloading: true,
    };
  },
  computed: {
    ...mapState(["isLogin", "profile", "isPhone"]),
    list() {
      let reg = new RegExp(this.key.trim(), "ig");
      return this.playList.filter((item) => {
        return item.title.match(reg);
      });
    },
    ImgUrl() {
      return "https://labfile.oss.aliyuncs.com/courses/10288/109951167824273221.jpeg";
    },
  },
  created() {
    this.getPlayList();
  },
  methods: {
    /* 获取歌单信息 */
    async getPlayList() {
      this.isLoading = true;
      const res = await getAllMusicList(this.$route.query.id);
      if (res.code !== 200) return;
      this.playList = Object.freeze(res.songList);
      this.isLoading = false;
    },
    playAll() {
      /* 访问音乐列表组件的方法 */
      this.$refs.listRef.playMusicAll();
    },
  },
};
</script>

<style lang="less" scoped>
/* 歌单信息区域 */
.detail-desc {
  display: flex;

  .detail-img-wrapper {
    width: 180px;
    height: 180px;
  }

  .detail-desc-info {
    line-height: 24px;
    margin-left: 20px;

    .author {
      margin: 15px 0;
      height: 24px;
      display: flex;

      .author-img {
        height: 24px;
      }
    }

    .info-btn {
      position: relative;
      bottom: 5px;
      margin-left: 15px;
    }
  }
}

.more-btn {
  margin-top: 10px;
  font-size: 14px;
  color: #bbb;
}

/* 列表头部区域 */
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 文字展开收起效果 */
.element {
  max-height: 20px;
  overflow: hidden;
  transition: max-height 1s;
}

:checked ~ .element {
  max-height: 666px;
}

input[type="checkbox"] {
  position: absolute;
  clip: rect(0 0 0 0);
}

:checked ~ .check-in {
  display: none;
}

:checked ~ .check-out {
  display: inline-block;
}

.check-out {
  display: none;
}

.check-in,
.check-out {
  color: #34538b;
  cursor: pointer;
}

.comment {
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .detail-desc {
    display: block;
    position: relative;

    .detail-img-wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.5;
      border-radius: 8px;
      overflow: hidden;

      img {
        transform: translateY(-20%);
        border: none;
      }
    }

    .detail-desc-info {
      padding-top: 10px;
    }
  }

  /* .detail-search {
      display: none;
    } */
  .info-btn {
    display: flex;
    flex-wrap: wrap;

    .btn {
      margin: 5px;
    }
  }
}

@media screen and (max-width: 415px) {
  .detail-desc {
    display: block;
    position: relative;

    .detail-img-wrapper {
      img {
        transform: none;
      }
    }

    .detail-desc-info {
      min-height: 60vw;
      position: relative;
    }
  }

  .detail-search {
    display: none;
  }
}
</style>
